<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>执行待办</title>
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <style>
      .mui-pull-bottom-tips {
        text-align: center;
      }

      .mui-pull-top-tips {
        position: absolute;
        top: -20px;
        left: 50%;
        margin-left: -25px;
        width: 40px;
        height: 40px;
        border-radius: 100%;
        z-index: 1;
      }

      .mui-bar ~ .mui-pull-top-tips {
        top: 24px;
      }

      .mui-pull-top-wrapper {
        width: 42px;
        height: 42px;
        display: block;
        text-align: center;
        background-color: #efeff4;
        border: 1px solid #ddd;
        border-radius: 25px;
        background-clip: padding-box;
        box-shadow: 0 4px 10px #bbb;
        overflow: hidden;
      }

      .mui-pull-top-tips.mui-transitioning {
        -webkit-transition-duration: 200ms;
        transition-duration: 200ms;
      }

      .mui-pull-top-tips .mui-pull-loading {
        /*-webkit-backface-visibility: hidden;
      				-webkit-transition-duration: 400ms;
      				transition-duration: 400ms;*/
        margin: 0;
      }

      .mui-pull-top-wrapper .mui-icon,
      .mui-pull-top-wrapper .mui-spinner {
        margin-top: 7px;
      }

      .mui-pull-top-wrapper .mui-icon.mui-reverse {
        /*-webkit-transform: rotate(180deg) translateZ(0);*/
      }

      .mui-pull-bottom-tips {
        text-align: center;
        background-color: #efeff4;
        font-size: 15px;
        line-height: 40px;
        color: #777;
      }

      .mui-pull-top-canvas {
        overflow: hidden;
        background-color: #fafafa;
        border-radius: 40px;
        box-shadow: 0 4px 10px #bbb;
        width: 40px;
        height: 40px;
        margin: 0 auto;
      }

      .mui-pull-top-canvas canvas {
        width: 40px;
      }

      .mui-card {
        border-radius: 5px;
        box-shadow: none;
        padding: 20px;
      }
      .mui-card-header {
        padding: 0 0 20px 0;
        position: relative;
        font-size: 16px;
      }
      .lists {
        padding: 20px 0 0 0;
      }

      .lists li {
        font-size: 14px;
        display: flex;
        justify-content: space-between;
      }

      .lists li .left_name {
        color: #9098ab;
        white-space: nowrap;
      }

      .lists li .right_name {
        color: #333333;
        float: right;
		font-size: 12px;
      }

      .btntxt {
        width: 100%;
        text-align: right;
        font-size: 14px;
        padding-right: 20px;
        color: #3188fe;
      }

      .mui-navigate-right:after,
      .mui-push-right:after {
        right: 15px;
        color: #3188fe;
      }
      .indexs {
        display: inline-block;
        width: 20px;
        height: 20px;
        background-color: #3188fe;
        border-radius: 50%;
        color: #fff;
        text-align: center;
        margin-right: 5px;
      }
      .txt_l {
        display: inline-block;
      }
      .marks {
        display: inline-block;
        width: 70px;
        height: 26px;
        line-height: 26px;
        /* background-color: #10B7AF; */
        border-radius: 2px;
        color: #fff;
        text-align: center;
        transform: skewX(-15deg);
      }
      .m_r {
        padding-right: 5px;
      }
      .mui-navigate-right:after {
        right: 0 !important;
        top: 15px;
        color: #b4c0cf;
        font-size: 20px;
      }
      .sx_s {
        color: #fff;
      }
      .sx_s span {
        font-size: 17px;
      }
      .b_g {
        background-color: #10b7af;
      }
      .b_g1 {
        background-color: #3188fe;
      }
      .b_g2 {
        background-color: #b4c0cf;
      }
      .screens {
        position: absolute;
        top: 44px;
        left: 0;
        width: 100%;
        min-height: 200px;
        background-color: #fff;
        z-index: 999;
      }
      .content_ul {
        padding: 30px;
        overflow: hidden;
      }
      .content_ul .rowli ul {
        padding: 0;
        margin: 0;
        list-style: none;
        border-bottom: solid 1px #dcdcdc;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        /* justify-content: space-between; */
      }
      .rowli ul li {
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        background-color: #f5f6f7;
        border: solid 1px #c2cfda;
        border-radius: 3px;
        color: #000;
        /* float: left; */
        margin-right: 20px;
        margin-bottom: 20px;
        box-sizing: border-box;
        /* flex-grow: 1; */
      }
      .rowli ul li.ls {
        background-color: #3188fe;
        color: #fff;
      }
      .btnli {
        text-align: center;
        padding-top: 30px;
        display: flex;
        justify-content: space-between;
      }
      .btnli .btns {
        background-color: #e7ecf1;
      }
      .btnli button {
        width: 45%;
      }
      .head_s {
        padding: 0 20px;
        border-bottom: solid 1px #dcdcdc !important;
        /* height: 20px; */
      }
      .mui-slider-indicator.mui-segmented-control {
        background-color: #fff;
      }

      .silder-wrap {
        height: 60px;
      }

      .mui-fullscreen .mui-segmented-control ~ .mui-slider-group {
        top: 60px;
      }

      .mui-segmented-control .mui-control-item {
        line-height: 60px;
      }

      .mui-segmented-control.mui-segmented-control-inverted
        .mui-control-item.mui-active {
        color: #3188fe;
        position: relative;
      }

      .mui-segmented-control.mui-segmented-control-inverted
        .mui-control-item.mui-active:after {
        content: "";
        display: block;
        width: 24px;
        height: 3px;
        background: #3188fe;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
	  .nodata-tips {
		  margin: 30px;
		  color: #bbb;
	  }
    </style>
  </head>

  <body>
    <div id="container">
      <!--<header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">执行待办</h1>
      </header>-->
      <div class="mui-content app-container">
        <div id="slider" class="mui-slider mui-fullscreen">
          <div class="tab-content mui-slider-group" id="tab-content">
            <!--<div
              id="sliderSegmentedControl"
              class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted silder-wrap"
              style="background-color: #fff"
            >
              <a class="mui-control-item" @tap="toItem(1)"
                ><span class="txt">技术交底</span></a
              >
              <a class="mui-control-item mui-active" @tap="toItem(2)"
                ><span class="txt">执行待办</span></a
              >
              <a class="mui-control-item" @tap="toItem(3)"
                ><span class="txt">班组级验收</span></a
              >
            </div>-->
            <div
              id="item1"
              class="mui-slider-item mui-control-content mui-active"
            >
              <!--<div id="item1-scroll">-->
              <div id="scroll" class="regular-scroll mui-scroll-wrapper">
                <div class="mui-scroll">
                  <div>
                    <div class="nodata-tips" v-if="projectList.length==0">
                      工作班成员接受不到任务可能存在以下原因：<br/>
                      1.请查看工作票是否在许可状态<br/>
                      2.当前时间是否在工作票的计划开始结束时间之内<br/>
                      3.当前执行人是否为工作票的工作班成员或工作负责人
                      4.请查看工作票班组成员名称与检修项目任务是否一致
                    </div>
                    <div
                      class="mui-card card_content"
                      v-for="item in projectList"
                      :key="item.id"
                      v-cloak
                    >
                      <div class="mui-card-header" @tap="toDoDetail(item.id)">
                        <span class="txt_l">
                          <span class="m_r mui-navigate-right">
                            <span
                              class="marks"
                              :class="!item.status ? 'b_g': 'b_g1'"
                              >{{!item.status ? '进行中':'未开始'}}</span
                            >
                          </span>
                          {{item.tn}}
                        </span>
                      </div>
                      <div class="mui-card-content">
                        <ul class="mui-table-view lists">
                          <li class="lis">
                            <div class="left_name">开始结束时间:{{formatDate(item.st)}}/{{formatDate(item.et)}}</div>
                            <div class="right_name">
                              <span @tap="offlineData(item.id,1)" style="margin-right: 10px;">缓存数据</span>
                              <span @tap="getDel(item.id)">删除</span>
                            </div>
                          </li>
                        </ul>
                      </div>
                    </div>
					
                  </div>
                </div>
                <!--</div>-->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="../../../js/mui.js"></script>
    <script src="../../../js/mui.pullToRefresh.js"></script>
    <script src="../../../js/mui.pullToRefresh.material.js"></script>
    <script src="../../../js/jquery-1.7.2.min.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../js/mkeyplus.base.js"></script>
    <script src="../js/indexDBs.js"></script>
    <script type="text/javascript" >
      mui.init()
      var size = 15;
      var page = 1;
      var donePage = 1;
      var lineType=null;
      let ids = 1;
      var db={};
      const dbName = 'myDBs'; // 数据库的名字
      const storeName = 'listPackage'; //仓库名称
      // mui('body').on('tap','a',function(){document.location.href=this.href;}); //解决a标签不能跳转页面
      mui.plusReady(async function () {
         vm.lineType= getSysInfo();
            lineType= getSysInfo();
        // const dbName = 'myDB', storeName = 'processPackage'
		await openDB(dbName, storeName, 1).then(res=>{
          console.log('打开indexDB',res)
          db = res
        })
        // 获取设备信息
         // plus.networkinfo.getCurrentType()
        // vm.getDatas() // test
        plus.nativeUI.showWaiting("加载中")
        if(!lineType){
          getLineData()
          return 
        }
        getProject(page)
      })

      var vm = new Vue({
        el: "#container",
        data: {
		  isOfflineData: false,
          projectList: [],
          taskList: [],
          lineType:false,
        },
        created: function () {
           
        },
        methods: {
          formatDate(tmp, fmt) {
            return mui.baseApp.formatDate(tmp, fmt)
          },
          toDoDetail(id) {
            mui.baseApp.openWindow("./carryoutToDoDetail.html", { taskId: id })
          },
          getSearch() {
            mui(".screens").popover("toggle")
            // this.searchs=!this.searchs
          },
          toTask(item) {
            mui.baseApp.openWindow("./project_task_list.html", {
              projectId: item.id,
            })
          },
          toItem(type) {
            if (type == 0) {
              mui.baseApp.openWindow("../index.html", {})
            }
            if (type == 1) {
              mui.baseApp.openWindow("../disclose/list.html", {})
            }
            if (type == 2) {
              mui.baseApp.openWindow("../performTasks/carryoutToDo.html", {})
            }
            if (type == 3) {
              mui.baseApp.openWindow("../performTasks/taskList.html", {})
            }
          },
		  del(){
			deleteDBAll(dbName)
			//deleteDB(dbName, storeName, 0)
		  },
		  getDel(id){
			localStorage.removeItem(id)
		    deleteDB(db, storeName, id).then(res=>{
				console.log('del数据',res.isTrusted)
				if(res.isTrusted){
					mui.toast('缓存数据删除成功')
				}
			})
		   },
		   // 工具器
		   getDeviceList(taskId) {
		   	//plus.nativeUI.showWaiting('加载中')
		   	mui.baseApp.httpRequst("get", "/app/api/project/execution/detail/" + taskId, {}, (data)=> {
		   	  console.log('工具器',data.data.deviceList)
		   	  // this.toolList = data.data.deviceList.utensil
			    localStorage.setItem(taskId, JSON.stringify(data.data.deviceList.utensil))
		   	  //plus.nativeUI.closeWaiting()
		   	}, ()=> {
		   	  //plus.nativeUI.closeWaiting()
		   	  console.log("获取数据失败");
		   	})
		   },
		  // 离线数据缓存
		  offlineData(projectTaskId, status){
			this.getDeviceList(projectTaskId)
			vm.isOfflineData = status == 1 ? true : false
			plus.nativeUI.showWaiting('离线数据下载中...')
		    mui.baseApp.httpRequst(
		      "get",
		      "/app/api/project/execution/offline/data/"+projectTaskId,
		      {},
		      function (data) {
				plus.nativeUI.closeWaiting()
		        data.data['isOver']= false
		        data.data['id'] = projectTaskId
		        console.log('离线数据',JSON.stringify(data))
		        let datas = data.data
		        // deleteDB('myDB', 'db_2', 1)
		        // getLineAdd(datas)
		        getSearchData(datas)
		        // getLineAdd(datas)
		      },
		      function () {
		        plus.nativeUI.closeWaiting()
		        console.log("获取数据失败")
		      }
		    )
		  },
         async getDatas(){
           // /app/api/project/execution/offline/data/{projectTaskId}/{stage}
            // const dbName = 'myDB', storeName = 'db_1'
            // const db = await openDB(dbName, storeName, 1).then(res=>{
            //   console.log('111',res)
            //   return res
            // })
             console.log('00',db)
              // var data3 =await deleteDB(db, storeName, 111)
              // console.log('44',data3)
            var data =await addData(db, storeName, {
              id: 111, // 必须且值唯一
              name: '张三',
              age: 18,
              desc: 'helloWord'
            }).then(res=>{
              console.log('222',res)
              return res
            })
            console.log('11',data)
                   
            var data1 =await getDataByKey(db, storeName, 111).then(res=>{
              console.log('333',res)
              return res
            }).catch(function (error) {
             console.log(error);
            })
            console.log('22',data1)
                   
            var data2 =await updateDB(db, storeName, { id: 111, desc: '修改的内容1133' })
            console.log('233',data2)
            
           // var data3 =await deleteDB(db, storeName, 111)
           // console.log('44',data3)
          }
        },
      })

      ;(function ($) {
        //阻尼系数
        var deceleration = mui.os.ios ? 0.003 : 0.0009
        $(".mui-scroll-wrapper").scroll({
          bounce: false,
          indicators: true, //是否显示滚动条
          deceleration: deceleration,
        })
        $.ready(function () {
          //循环初始化所有下拉刷新，上拉加载。
          $.each(
            document.querySelectorAll(".mui-slider-group .mui-scroll"),
            function (index, pullRefreshEl) {
              $(pullRefreshEl).pullToRefresh({
                down: {
                  callback: function () {
                    var self = this
                    setTimeout(function () {
                      if (index === 0) {
                        page = 1
                        getProject(page)
                      } else {
                        donePage = 1
                      }
                      self.endPullDownToRefresh()
                    }, 1000)
                  },
                },
                up: {
                  callback: function () {
                    var self = this
                    setTimeout(function () {
                      mui.toast("11111")
                      console.log(index)
                      if (index === 0) {
                        page++
                        getProject(page)
                      }
                      self.endPullUpToRefresh()
                    }, 1000)
                  },
                },
              })
            }
          )
          mui("#item1 .mui-scroll").pullToRefresh().endPullUpToRefresh(true)
//        mui("#item1 .mui-scroll").pullToRefresh().endPullUpToRefresh(true)
        })
      })(mui)

      function getProject(page) {
        if (page === 1) {
          plus.nativeUI.showWaiting("加载中...")
        }
        mui.baseApp.httpRequst(
          "get",
          "/app/api/project/execution/todo",
          {
            page: page,
            size: size,
          },
          function (data) {
            console.log(data.data)
            var data = data.data
            vm.projectList = data.records
             
            plus.nativeUI.closeWaiting()
            if (page == 1) {
              vm.projectList = []
            }
            vm.projectList = vm.projectList.concat(data.records)
            let datas={
              id:1,
              records:[...vm.projectList]||[]
            }
            getSearchData(datas) // 缓存待办列表
            if (data.records.length < size) {
              //
              console.log("没了")
              mui("#item1 .mui-scroll").pullToRefresh().endPullUpToRefresh(true) //参数为true代表没有更多数据了。
              return
            } else {
              mui("#item1 .mui-scroll")
                .pullToRefresh()
                .endPullUpToRefresh(false) //参数为true代表没有更多数据了。
              mui("#item1 .mui-scroll").pullToRefresh().refresh(true) //启用上拉加载
            }
          },
          function () {
            plus.nativeUI.closeWaiting()
            console.log("获取数据失败")
          }
        )
      }
      
      function getLineData(){
        getDataByKey(db, storeName, ids).then(res=>{
           plus.nativeUI.closeWaiting(); 
          console.log('获取离线数据',JSON.stringify(res))
          let data=res
          vm.projectList = data.records
           if (page == 1) {
             vm.projectList = []
           }
           vm.projectList = vm.projectList.concat(data.records)
           if (data.records.length < size) {
             //
             console.log("没了")
             mui("#item1 .mui-scroll").pullToRefresh().endPullUpToRefresh(true) //参数为true代表没有更多数据了。
             return
           } else {
             mui("#item1 .mui-scroll")
               .pullToRefresh()
               .endPullUpToRefresh(false) //参数为true代表没有更多数据了。
             mui("#item1 .mui-scroll").pullToRefresh().refresh(true) //启用上拉加载
           }
        })
      }
      function getSearchData(data){
		  console.log('接口返回数据',data)
        //通过游标
        cursorGetData(db, storeName).then(res=>{
          console.log('获取缓存',res)
		  
          if(res&&res.length>0){
            if(data.id==res[0].id){
              getUpData(data)
            }else{
              getLineAdd(data)
            }
          }else{
             getLineAdd(data)
          }
          // if(res&&res.lists&&res.lists.length>0){
          //  getUpData(data)
          // }else{
          //   // getUpData(data)
          //   getLineAdd(data)
          // }
           
          
           
        //通过id读取数据
         // getDataByKey(db, storeName, id).then(res=>{
         //   console.log('333',res)
         //   // return res
         // }).catch(function (error) {
         //  console.log(error);
         // })
          
           // return res
         }).catch(function (error) {
          console.log(error);
         })
       }
      function getLineAdd(data){
         console.log('add',data)
         addData(db, storeName, data).then(res=>{
           console.log('add数据',res)
		   if(vm.isOfflineData) mui.toast('数据缓存成功')
		   // 更新任务列表状态
		   
         }).catch(function (error) {
          console.log(error);
         })
       }
       function getUpData(data){
         updateDB(db, storeName, data)
       }
      document.getElementById("slider").addEventListener("slide", function (e) {
        console.log(e.detail.slideNumber)
      })
      window.addEventListener("back", function (event) {
        let data = event.detail
        setTimeout(() => {
          page = 1
          getProject(page)
        }, 500)
      })
      function getSysInfo() {
          types = {};
          types[plus.networkinfo.CONNECTION_UNKNOW] = "未知";
          types[plus.networkinfo.CONNECTION_NONE] = "未连接网络";
          types[plus.networkinfo.CONNECTION_ETHERNET] = "有线网络";
          types[plus.networkinfo.CONNECTION_WIFI] = "WiFi网络";
          types[plus.networkinfo.CONNECTION_CELL2G] = "2G蜂窝网络";
          types[plus.networkinfo.CONNECTION_CELL3G] = "3G蜂窝网络";
          types[plus.networkinfo.CONNECTION_CELL4G] = "4G蜂窝网络";
       
          var str = types[plus.networkinfo.getCurrentType()];
          if (str == '未知' || str == '未连接网络') {
              return false;
          } else {
              return true;
          }
       
      }
    </script>
  </body>
</html>
